<!-- 横向布局 -->
<template>
    <div class="horizontal-layout">
        <div class="header-wrap">
            <slot name="logo"></slot>
            <div class="menu-wrap">
                <slot name="menu"></slot>
                <slot name="toolbar"></slot>
            </div>
        </div>
        <div class="tab-wrap">
            <slot name="tab"></slot>
        </div>
        <div class="center-wrap">
            <div class="content-wrap">
                <slot name="content"></slot>
            </div>
            <div class="fotter-wrap">
                <slot name="fotter"></slot>
            </div>
        </div>
    </div>
</template>
    
<script setup>
</script>
    
<style  lang="scss">
.horizontal-layout {
    width: 100%;
    height: 100%;
    position: relative;

    .progress {
        position: absolute;
        z-index: 11000;
        width: 100%;
    }

    .header-wrap {
        width: 100%;
        height: 55px;
        display: flex;
        background-color: var(--horizontal-header-bgcolor);

        .toolbar-wrap {
            height: 100%;
            width: 25%;
        }
    }
    .menu-wrap {
        width: calc(100% - 210px);
        display: flex;
        justify-content: space-between;
    }

    .center-wrap {
        height: calc(100% - 109px);
        background-color: #f0f2f5;
    }

    .content-wrap {
        height: calc(100% - 30px);
    }

    .fotter-wrap {
        height: 30px;
        transition: all .3s;
    }
    .el-menu{
        border-bottom: none !important;
    }
}
</style>